<script type="text/javascript" src="/public/js/extension/jquery/jquery.1.7.1min.js"></script>
<script type="text/javascript" src="/public/js/extension/carousel/jquery.jcarousel.min.js"></script>
<link href="/public/js/extension/carousel/skin.css" type="text/css" rel="stylesheet" />
<script type="text/javascript">
    //chuyen dong
    $(function() {
        $('#mycarousel').jcarousel({
            visible: 5,
            wrap: "circular",
            animation: "slow"
        });
    });
    
    //hieu ung
    
    $(function() {
        $('li.jcarousel-item').mouseenter(function(e) {
            $(this).children('a').fadeIn(200);
        }).mouseleave(function(e) {
            $(this).children('a').fadeOut(200);
        });
    });

</script>
<style>
    .quickview{
        position: absolute;
        top: 0;
        left: 0;
        width: 100px;
        height: 100px;
        background: #000;
        opacity: 0.6;
        color: #fff;
    }
</style>


<ul id="mycarousel" class="jcarousel-skin-tango">
    <li>
        <div><img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" width="75" height="75" alt="" /></div>
        <div >sdfadfasdfa</div>
        <a class="quickview" style="display: none;" href="#">Xem nhanh</a>
    </li>
    <li>
        <div>
            <img src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" width="75" height="75" alt="" />
        </div>
        <div>sdfadfasdfa</div>
        <a class="quickview" style="display: none;" href="#">Xem nhanh</a>
    </li>
    <li>
        <div>
            <img src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" width="75" height="75" alt="" />
        </div>
        <div>sdfadfasdfa</div>
        <a class="quickview" style="display: none;" href="#">Xem nhanh</a>
    </li>
    <li>
        <div>
            <img src="http://static.flickr.com/77/199481108_4359e6b971_s.jpg" width="75" height="75" alt="" />
        </div>
        <div>sdfadfasdfa</div>
        <a class="quickview" style="display: none;" href="#">Xem nhanh</a>
    </li>
    <li>
        <div>
            <img src="http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg" width="75" height="75" alt="" />
        </div>
        <div>sdfadfasdfa</div>
        <a class="quickview" style="display: none;" href="#">Xem nhanh</a>
    </li>
    <li>
        <div>
            <img src="http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg" width="75" height="75" alt="" />
        </div>
        <div>sdfadfasdfa</div>
        <a class="quickview" style="display: none;" href="#">Xem nhanh</a>
    </li>
    <li>
        <div>
            <img src="http://static.flickr.com/58/199481218_264ce20da0_s.jpg" width="75" height="75" alt="" />
        </div>
        <div>sdfadfasdfa</div>
        <a class="quickview" style="display: none;" href="#">Xem nhanh</a>
    </li>
    <li>
        <div>
            <img src="http://static.flickr.com/69/199481255_fdfe885f87_s.jpg" width="75" height="75" alt="" />
        </div>
        <div>sdfadfasdfa</div>
        <a class="quickview" style="display: none;" href="#">Xem nhanh</a>
    </li>
    <li>
        <div>
            <img src="http://static.flickr.com/60/199480111_87d4cb3e38_s.jpg" width="75" height="75" alt="" />
        </div>
        <div>sdfadfasdfa</div>
        <a class="quickview" style="display: none;" href="#">Xem nhanh</a>
    </li>
    <li>
        <div>
            <img src="http://static.flickr.com/70/229228324_08223b70fa_s.jpg" width="75" height="75" alt="" />
        </div>
        <div>sdfadfasdfa</div>
        <a class="quickview" style="display: none;" href="#">Xem nhanh</a>
    </li>
</ul>

<div style="height: 100px;"></div>

<style type="text/css">
    a {
        text-decoration: none;
    }

    .clearfix {
        display: block;
    }

    /* --- Container configuration ---------------------------------------------------------- */
    .viewport {
        border: 3px solid #eee;
        float: left;
        height: 299px;
        margin: 0 9px 9px 0;
        overflow: hidden;
        position: relative;
        width: 450px;
    }

    /* This is so that the 2nd thumbnail in each row fits snugly. You will want to add a similar
       class to the last thumbnail in each row to get rid of the margin-right. */
    .no-margin {
        margin-right: 0;
    }

    /* --- Link configuration that contains the image and label ----------------------------- */
    .viewport a {
        display: block;
        position: relative;
    }

    .viewport a img {
        height: 332px;
        left: -20px;
        position: relative;
        top: -20px;
        width: 500px;
    }

    /* --- Label configuration -------------------------------------------------------------- */
    .viewport a span {
        display: none;
        font-size: 3.0em;
        font-weight: bold;
        height: 100%;
        padding-top: 120px;
        position: absolute;
        text-align: center;
        text-decoration: none;
        width: 100%;
        z-index: 100;
    }
    .viewport a span em {
        display: block;
        font-size: 0.45em;
        font-weight: normal;
    }

    /* --- Dark hover background ------------------------------------------------------------ */
    .dark-background {
        background-color: rgba(15, 15, 15, 0.6);
        color: #fff;
        text-shadow: #000 0px 0px 20px;
    }
    .dark-background em {
        color: #ccc;
    }

    /**
     * You could create multiple hover background classes for different looks depending on the
     * image type. Use your imagination!
    */
</style>

<script type="text/javascript">
    $(function() {
        $('.viewport').mouseenter(function(e) {
            $(this).children('a').children('img').animate({ height: '299', left: '0', top: '0', width: '450'}, 100);
            $(this).children('a').children('span').fadeIn(200);
        }).mouseleave(function(e) {
            $(this).children('a').children('img').animate({ height: '332', left: '-20', top: '-20', width: '500'}, 100);
            $(this).children('a').children('span').fadeOut(200);
        });
    });
</script>
<div class="wrap-thin demo-thin clearfix">
    <div class="viewport">
        <a href="http://www.flickr.com/photos/matt_bango/3959900087/">
            <span class="dark-background">Northern Saw-whet Owl <em>Photo by Matt Bango</em></span>
            <img src="http://farm4.static.flickr.com/3471/3959900087_48d1107093.jpg" alt="Northern Saw-Whet Owl" />
        </a>
    </div>

    <div class="viewport no-margin">
        <a href="http://www.flickr.com/photos/matt_bango/3478879694/">
            <span class="dark-background">Red-shouldered Hawk <em>Photo by Matt Bango</em></span>
            <img src="http://farm4.static.flickr.com/3645/3478879694_029e078d4d.jpg" alt="Red-shouldered Hawk" />
        </a>
    </div>

    <div class="viewport">
        <a href="http://www.flickr.com/photos/matt_bango/4549664070/">
            <span class="dark-background">Laughing Gulls <em>Photo by Matt Bango</em></span>
            <img src="http://farm5.static.flickr.com/4020/4549664070_bd21552461.jpg" alt="Laughing Gulls" />
        </a>
    </div>

    <div class="viewport no-margin">
        <a href="http://www.flickr.com/photos/matt_bango/4549276502/">
            <span class="dark-background">American Oystercatcher <em>Photo by Matt Bango</em></span>
            <img src="http://farm5.static.flickr.com/4026/4549276502_fe848b02e9.jpg" alt="American Oystercatcher" />
        </a>
    </div>
</div>
